<template>
  <div class="bodys">
    <div class="text">消息事件处理</div>

    <el-card shadow="never">
      <div class="headerbox">
        <el-form ref="form" :model="category">
          <el-form-item label="类别">
            <el-select v-model="fakeCategory.data" placeholder="请选择活动区域">
              <el-option label="问题咨询" value="1" />
              <el-option label="公众报告" value="2" />
              <el-option label="专业调查" value="3" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="time">
          <div class="txt">时间</div>
          <el-date-picker v-model="time" type="date" placeholder="选择日期" />
        </div>
        <el-button type="primary" @click="addList">添加记录</el-button>
      </div>
      <el-table stripe :data="fakeData.data" border style="width: 100%" height="50vh">
        <el-table-column label="ID" type="index" />
        <el-table-column prop="text1" label="消息类别" />
        <el-table-column prop="text2" label="区域" />
        <el-table-column prop="text3" label="标题" width="200" />
        <el-table-column prop="text4" label="上报内容" width="300" />
        <el-table-column prop="text5" label="上报人员" />
        <el-table-column prop="text6" label="	上报日期" />
        <el-table-column prop="text7" label="处理人员" />
        <el-table-column prop="text8" label="处理时间" />
        <el-table-column prop="text9" label="回复内容" />
        <el-table-column width="150" label="操作" fixed="right">
          <template #default="{ row }">
            <el-link type="primary" @click="editList(row)">修改</el-link>
            <el-link type="danger" @click="deleList">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="fakeData.size"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="fakeData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加/修改记录对话框 -->
    <el-dialog
      :title="num === 1 ? '添加记录对话框' : '修改记录对话框'"
      :visible.sync="addARecordVisible"
      width="40%"
      @close="dialogClose"
    >
      <div>
        <el-row>
          <el-form
            ref="form"
            :rules="addRules"
            :model="addform"
            label-width="80px"
          >
            <el-col :span="12">
              <el-form-item label="消息类别" prop="data1">
                <el-select v-model="addform.data1" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="行政区划" prop="data2">
                <el-select v-model="addform.data2" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="精度" prop="data3">
                <el-input v-model="addform.data3" />
              </el-form-item>
              <el-form-item label="维度" prop="data4">
                <el-input v-model="addform.data4" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报内容">
                <el-input v-model="addform.data5" type="textarea" />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addARecordVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addARecordVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      // 添加修改对话框切换
      num: null,
      // 假接口数据
      fakeData: {
        data: [
          {
            id: '1',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '2',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '3',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '4',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '5',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '5',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '5',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '5',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '5',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          },
          {
            id: '5',
            text1: '问题咨询',
            text2: '区域',
            text3: '请问这是什么病啊',
            text4: '我家的杨树，叶子出现很多斑点.',
            text5: '上报人员',
            text6: '上报日期',
            text7: '处理人员',
            text8: '处理时间',
            text9: '回复内容'
          }
        ],
        total: 5,
        size: 10
      },
      // 假类别数据
      category: null,
      fakeCategory: {
        data: '问题咨询'
      },
      // 时间假数据
      time: null,
      addARecordVisible: false,
      // 添加数据
      addform: {
        data1: '',
        data2: '',
        data3: '',
        data4: '',
        data5: ''
      },
      // 添加数据的表单验证
      addRules: {
        data1: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        data2: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        data3: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        data4: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    // 分页功能
    handleSizeChange(NewSize) {
      console.log('切换')
    },
    handleCurrentChange(newNum) {
      console.log('页码切换')
    },
    // 添加记录
    addList() {
      this.addARecordVisible = true
      this.num = 1
    },
    // 修改记录
    editList(row) {
      this.addARecordVisible = true
      this.num = 2
      console.log(row)
      this.addform.data1 = row.text1
      this.addform.data2 = row.text2
      this.addform.data3 = row.text3
      this.addform.data4 = row.text4
      this.addform.data5 = row.text5
    },
    // 删除记录
    async deleList() {
      const prve = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      this.$message.success('删除成功！')
      // console.log(prve)
    },
    // 对话框关闭事件
    dialogClose() {
      this.addform = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.bodys {
  padding: 10px;
}
.text {
  height: 60px;
  font-size: 20px;
  margin-left: 10px;
  color: #888;
  margin-right: 20px;
  font-weight: 500;
  font-size: 22px;
  line-height: 60px;
  margin-left: 20px;
}

.headerbox {
  .el-form {
    float: left;
    width: 300px;
  }
  .time {
    font-size: 15px;
    float: left;
    width: 260px;
    display: flex;
    justify-content: space-between;
    .txt {
      margin-top: 10px;
    }
  }
}
.el-pagination {
  margin-top: 20px;
}
.el-link {
  margin-left: 20px;
}
.el-button {
  margin-left: 30px;
}
.el-row {
  .el-input {
    width: 200px;
  }
}
</style>
